<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <title>reveal.js – The HTML Presentation Framework</title>

    <meta
      name="description"
      content="A framework for easily creating beautiful presentations using HTML"
    />
    <meta name="author" content="Hakim El Hattab" />

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta
      name="apple-mobile-web-app-status-bar-style"
      content="black-translucent"
    />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="dist/reset.css" />
    <link rel="stylesheet" href="dist/reveal.css" />
    <link rel="stylesheet" href="dist/theme/black.css" id="theme" />

    <!-- Theme used for syntax highlighting of code -->
    <link rel="stylesheet" href="plugin/highlight/monokai.css" />
  </head>

  <body>
    <div class="reveal">
      <!-- 这个容器内的任何section元素都会显示为一个幻灯片 -->
      <div class="slides">
        <section>
          <a href="https://revealjs.com">
            <img
              src="https://static.slid.es/reveal/logo-v1/reveal-white-text.svg"
              alt="reveal.js logo"
              style="
                height: 180px;
                margin: 0 auto 4rem auto;
                background: transparent;
              "
              class="demo-logo"
            />
          </a>
          <h3>HTML演示框架</h3>
          <p>
            <small
              >由 <a href="http://hakim.se">Hakim El Hattab</a> 和
              <a href="https://github.com/hakimel/reveal.js/graphs/contributors"
                >贡献者</a
              ></small
            >
          </p>
        </section>

        <section>
          <h2>您好</h2>
          <p>
            reveal.js使您能够使用HTML创建美丽的互动幻灯片。这个演示将向您展示它可以做到的示例。
          </p>
        </section>

        <!-- 嵌套垂直幻灯片的示例 -->
        <section>
          <section>
            <h2>垂直幻灯片</h2>
            <p>幻灯片可以嵌套在彼此内部。</p>
            <p>使用 <em>空格</em> 键浏览所有幻灯片。</p>
            <br />
            <a href="#/2/1" class="navigate-down">
              <img
                class="r-frame"
                style="background: rgba(255, 255, 255, 0.1)"
                width="178"
                height="238"
                data-src="https://static.slid.es/reveal/arrow.png"
                alt="向下箭头"
              />
            </a>
          </section>
          <section>
            <h2>地下层级 1</h2>
            <p>嵌套幻灯片对于在高层水平幻灯片下方添加额外细节非常有用。</p>
          </section>
          <section>
            <h2>地下层级 2</h2>
            <p>就是这样，是时候返身回去了。</p>
            <br />
            <a href="#/2">
              <img
                class="r-frame"
                style="
                  background: rgba(255, 255, 255, 0.1);
                  transform: rotate(180deg);
                "
                width="178"
                height="238"
                data-src="https://static.slid.es/reveal/arrow.png"
                alt="向上箭头"
              />
            </a>
          </section>
        </section>

        <section>
          <h2>幻灯片</h2>
          <p>
            不会编码？没问题。这里有一个功能齐全的可视化编辑器， 您可以在<a
              href="https://slides.com"
              target="_blank"
              >https://slides.com</a
            >试用它。
          </p>
        </section>

        <section data-visibility="hidden">
          <h2>隐藏幻灯片</h2>
          <p>
            这张幻灯片在源代码中可见，但在演示时是隐藏的。您可以通过将
            `showHiddenSlides` 配置选项设置为 `true` 来显示所有隐藏幻灯片。
          </p>
        </section>

        <section data-auto-animate>
          <h2 data-id="code-title">漂亮的代码</h2>
          <pre
            data-id="code-animation"
          ><code class="hljs javascript" data-trim data-line-numbers>
						import React, { useState } from 'react';

						function Example() {
						  const [count, setCount] = useState(0);

						  return (
						    ...
						  );
						}
					</code></pre>
          <p>
            代码语法高亮由<a href="https://highlightjs.org/usage/"
              >highlight.js</a
            >提供。
          </p>
        </section>

        <section data-auto-animate>
          <h2 data-id="code-title">带动画的代码</h2>
          <pre
            data-id="code-animation"
          ><code class="hljs javascript" data-trim data-line-numbers="|4,8-11|17|22-24"><script type="text/template">
						import React, { useState } from 'react';

						function Example() {
						  const [count, setCount] = useState(0);

						  return (
						    <div>
						      <p>您点击了 {count} 次</p>
						      <button onClick={() => setCount(count + 1)}>
						        点击我
						      </button>
						    </div>
						  );
						}

						function SecondExample() {
						  const [count, setCount] = useState(0);

						  return (
						    <div>
						      <p>您点击了 {count} 次</p>
						      <button onClick={() => setCount(count + 1)}>
						        点击我
						      </button>
						    </div>
						  );
						}
					</script></code></pre>
        </section>

        <section>
          <h2>视角</h2>
          <p>按 <strong>ESC</strong> 键进入幻灯片概览。</p>
          <p>
            按住
            <strong>alt</strong>
            键（在Linux中为<strong>ctrl</strong>）并点击任何元素以使用
            <a href="http://lab.hakim.se/zoom-js">zoom.js</a
            >放大。再点击一次以缩小。
          </p>
          <p>(注：在Linux中使用ctrl + 点击。)</p>
        </section>

        <section
          data-auto-animate
          data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)"
        >
          <h2>自动动画</h2>
          <p>
            可以使用<a href="https://revealjs.com/auto-animate/">自动动画</a
            >在幻灯片之间自动动画匹配元素。
          </p>
          <div class="r-hstack justify-center">
            <div
              data-id="box1"
              style="
                background: #999;
                width: 50px;
                height: 50px;
                margin: 10px;
                border-radius: 5px;
              "
            ></div>
            <div
              data-id="box2"
              style="
                background: #999;
                width: 50px;
                height: 50px;
                margin: 10px;
                border-radius: 5px;
              "
            ></div>
            <div
              data-id="box3"
              style="
                background: #999;
                width: 50px;
                height: 50px;
                margin: 10px;
                border-radius: 5px;
              "
            ></div>
          </div>
        </section>

        <section
          data-auto-animate
          data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)"
        >
          <div class="r-hstack justify-center">
            <div
              data-id="box1"
              data-auto-animate-delay="0"
              style="
                background: cyan;
                width: 150px;
                height: 100px;
                margin: 10px;
              "
            ></div>
            <div
              data-id="box2"
              data-auto-animate-delay="0.1"
              style="
                background: magenta;
                width: 150px;
                height: 100px;
                margin: 10px;
              "
            ></div>
            <div
              data-id="box3"
              data-auto-animate-delay="0.2"
              style="
                background: yellow;
                width: 150px;
                height: 100px;
                margin: 10px;
              "
            ></div>
          </div>
          <h2 style="margin-top: 20px">自动动画</h2>
        </section>
        <section
          data-auto-animate
          data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)"
        >
          <div class="r-stack">
            <div
              data-id="box1"
              style="background: cyan; width: 300px; height: 300px"
            ></div>
            <div
              data-id="box2"
              style="background: magenta; width: 200px; height: 200px"
            ></div>
            <div
              data-id="box3"
              style="background: yellow; width: 100px; height: 100px"
            ></div>
          </div>
          <h2 style="margin-top: 20px">自动动画</h2>
        </section>

        <section>
          <h2>触摸优化</h2>
          <p>
            演示在触摸设备（如手机和平板电脑）上看起来很棒。只需通过幻灯片轻轻滑动即可。
          </p>
        </section>

        <section data-markdown>
          <script type="text/template">
            ## Markdown 支持

            使用内联或外部Markdown写内容。
            在 [文档](https://revealjs.com/markdown/) 中提供说明和更多信息。

            ```html []
            <section data-markdown>
              ## Markdown 支持

              使用内联或外部Markdown写内容。
              在 [文档](https://revealjs.com/markdown/) 中提供说明和更多信息。
            </section>
            ```
          </script>
        </section>

        <section>
          <p>添加 <code>r-fit-text</code> 类以自动调整文本大小</p>
          <h2 class="r-fit-text">适合文本</h2>
        </section>

        <section>
          <section id="fragments">
            <h2>分片</h2>
            <p>点击下一个箭头...</p>
            <p class="fragment">...逐步显示...</p>
            <p>
              <span class="fragment">...一个</span>
              <span class="fragment">分片</span>
              <span class="fragment">幻灯片。</span>
            </p>

            <aside class="notes">
              此幻灯片有分片， notes窗口中也会逐步显示。
            </aside>
          </section>
          <section>
            <h2>分片样式</h2>
            <p>有不同类型的分片，例如：</p>
            <p class="fragment grow">增长</p>
            <p class="fragment shrink">缩小</p>
            <p class="fragment fade-out">渐隐</p>
            <p>
              <span style="display: inline-block" class="fragment fade-right"
                >向右渐隐,</span
              >
              <span style="display: inline-block" class="fragment fade-up"
                >向上渐隐,</span
              >
              <span style="display: inline-block" class="fragment fade-down"
                >向下渐隐,</span
              >
              <span style="display: inline-block" class="fragment fade-left"
                >向左渐隐</span
              >
            </p>
            <p class="fragment fade-in-then-out">先渐显后渐隐</p>
            <p class="fragment fade-in-then-semi-out">先渐显再半隐</p>
            <p>
              突出显示 <span class="fragment highlight-red">红色</span>
              <span class="fragment highlight-blue">蓝色</span>
              <span class="fragment highlight-green">绿色</span>
            </p>
          </section>
        </section>

        <section id="transitions">
          <h2>过渡样式</h2>
          <p>
            您可以选择不同的过渡，例如： <br />
            <a href="?transition=none#/transitions">无</a> -
            <a href="?transition=fade#/transitions">淡入</a> -
            <a href="?transition=slide#/transitions">侧滑</a> -
            <a href="?transition=convex#/transitions">凸面</a> -
            <a href="?transition=concave#/transitions">凹面</a> -
            <a href="?transition=zoom#/transitions">缩放</a>
          </p>
        </section>

        <section id="themes">
          <h2>主题</h2>
          <p>
            reveal.js 提供了一些内置主题： <br />
            <!-- 在页面加载后交换主题的黑客。并不灵活，只适用于 reveal.js 演示。 -->
            <a
              href="#/themes"
              onclick="document.getElementById('theme').setAttribute('href','dist/theme/black.css'); return false;"
              >黑色（默认）</a
            >
            -
            <a
              href="#/themes"
              onclick="document.getElementById('theme').setAttribute('href','dist/theme/white.css'); return false;"
              >白色</a
            >
            -
            <a
              href="#/themes"
              onclick="document.getElementById('theme').setAttribute('href','dist/theme/league.css'); return false;"
              >联盟</a
            >
            -
            <a
              href="#/themes"
              onclick="document.getElementById('theme').setAttribute('href','dist/theme/sky.css'); return false;"
              >天空</a
            >
            -
            <a
              href="#/themes"
              onclick="document.getElementById('theme').setAttribute('href','dist/theme/beige.css'); return false;"
              >米色</a
            >
            -
            <a
              href="#/themes"
              onclick="document.getElementById('theme').setAttribute('href','dist/theme/simple.css'); return false;"
              >简约</a
            >
            <br />
            <a
              href="#/themes"
              onclick="document.getElementById('theme').setAttribute('href','dist/theme/serif.css'); return false;"
              >衬线</a
            >
            -
            <a
              href="#/themes"
              onclick="document.getElementById('theme').setAttribute('href','dist/theme/blood.css'); return false;"
              >血液</a
            >
            -
            <a
              href="#/themes"
              onclick="document.getElementById('theme').setAttribute('href','dist/theme/night.css'); return false;"
              >夜晚</a
            >
            -
            <a
              href="#/themes"
              onclick="document.getElementById('theme').setAttribute('href','dist/theme/moon.css'); return false;"
              >月亮</a
            >
            -
            <a
              href="#/themes"
              onclick="document.getElementById('theme').setAttribute('href','dist/theme/solarized.css'); return false;"
              >Solarized</a
            >
          </p>
        </section>

        <section>
          <section data-background="#dddddd">
            <h2>幻灯片背景</h2>
            <p>
              在幻灯片上设置
              <code>data-background="#dddddd"</code>
              以更改背景颜色。所有CSS颜色格式均受支持。
            </p>
            <a href="#" class="navigate-down">
              <img
                class="r-frame"
                style="background: rgba(255, 255, 255, 0.1)"
                width="178"
                height="238"
                data-src="https://static.slid.es/reveal/arrow.png"
                alt="向下箭头"
              />
            </a>
          </section>
          <section
            data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)"
          >
            <h2>渐变背景</h2>
            <pre><code class="hljs html wrap">&lt;section data-background-gradient=
							"linear-gradient(to bottom, #ddd, #191919)"&gt;</code></pre>
          </section>
          <section
            data-background="https://static.slid.es/reveal/image-placeholder.png"
          >
            <h2>图像背景</h2>
            <pre><code class="hljs html">&lt;section data-background="image.png"&gt;</code></pre>
          </section>
          <section
            data-background="https://static.slid.es/reveal/image-placeholder.png"
            data-background-repeat="repeat"
            data-background-size="100px"
          >
            <h2>瓷砖背景</h2>
            <pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
          </section>
          <section
            data-background-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4"
            data-background-color="#000000"
          >
            <div
              style="
                background-color: rgba(0, 0, 0, 0.9);
                color: #fff;
                padding: 20px;
              "
            >
              <h2>视频背景</h2>
              <pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background-video="video.mp4,video.webm"&gt;</code></pre>
            </div>
          </section>
          <section data-background="http://i.giphy.com/90F8aUepslB84.gif">
            <h2>...还有GIF!</h2>
          </section>
        </section>

        <section
          data-transition="slide"
          data-background="#4d7e65"
          data-background-transition="zoom"
        >
          <h2>背景过渡</h2>
          <p>
            通过backgroundTransition选项，您可以使用不同的背景过渡。这个名为“缩放”。
          </p>
          <pre><code class="hljs javascript">Reveal.configure({ backgroundTransition: 'zoom' })</code></pre>
        </section>

        <section
          data-transition="slide"
          data-background="#b5533c"
          data-background-transition="zoom"
        >
          <h2>背景过渡</h2>
          <p>您可以逐幅覆盖背景过渡。</p>
          <pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background-transition="zoom"&gt;</code></pre>
        </section>

        <section
          data-background-iframe="https://hakim.se"
          data-background-interactive
        >
          <div
            style="
              position: absolute;
              width: 40%;
              right: 0;
              box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5),
                0 5px 25px rgba(0, 0, 0, 0.2);
              background-color: rgba(0, 0, 0, 0.9);
              color: #fff;
              padding: 20px;
              font-size: 20px;
              text-align: left;
            "
          >
            <h2>Iframe背景</h2>
            <p>
              由于reveal.js在网页上运行，您可以轻松嵌入其他网页内容。尝试与后台的页面进行交互。
            </p>
          </div>
        </section>

        <section>
          <h2>奇妙列表</h2>
          <ul>
            <li>这里没有顺序</li>
            <li>也没有这里</li>
            <li>也没有这里</li>
            <li>也没有这里</li>
          </ul>
        </section>

        <section>
          <h2>精彩的有序列表</h2>
          <ol>
            <li>一小于...</li>
            <li>二小于...</li>
            <li>三!</li>
          </ol>
        </section>

        <section>
          <h2>表格</h2>
          <table>
            <thead>
              <tr>
                <th>项目</th>
                <th>值</th>
                <th>数量</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>苹果</td>
                <td>$1</td>
                <td>7</td>
              </tr>
              <tr>
                <td>柠檬水</td>
                <td>$2</td>
                <td>18</td>
              </tr>
              <tr>
                <td>面包</td>
                <td>$3</td>
                <td>2</td>
              </tr>
            </tbody>
          </table>
        </section>

        <section>
          <h2>聪明的引用</h2>
          <p>
            这些引用有两种形式，行内引用：
            <q
              cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations"
              >关于标准的美妙之处在于，可以选择的种类太多了</q
            >
            和块引用：
          </p>
          <blockquote
            cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations"
          >
            &ldquo;多年来，有一个理论认为，数百万只猴子在数百万台打字机上随机打字，将重现莎士比亚的全部作品。而互联网证明这个理论是错误的。&rdquo;
          </blockquote>
        </section>

        <section>
          <h2>星际相互联系</h2>
          <p>
            您可以在幻灯片之间内部链接，
            <a href="#/2/3">就像这样</a>。
          </p>
        </section>

        <section>
          <h2>讲师视图</h2>
          <p>
            有一个
            <a href="https://revealjs.com/speaker-view/">讲师视图</a>。它
            包含计时器、即将到来的幻灯片预览以及您的讲师备注。
          </p>
          <p>按 <em>S</em> 键试试。</p>

          <aside class="notes">
            哦，这里有一些备注。它们将在您的演示中隐藏，但您可以在打开讲师备注窗口时看到它们（在键盘上按's'）。
          </aside>
        </section>

        <section>
          <h2>导出为PDF</h2>
          <p>
            演示文稿可以被
            <a href="https://revealjs.com/pdf-export/">导出为PDF</a>，
            这是一个示例：
          </p>
          <iframe
            data-src="https://www.slideshare.net/slideshow/embed_code/42840540"
            width="445"
            height="355"
            frameborder="0"
            marginwidth="0"
            marginheight="0"
            scrolling="no"
            style="border: 3px solid #666; margin-bottom: 5px; max-width: 100%"
            allowfullscreen
          >
          </iframe>
        </section>

        <section>
          <h2>全局状态</h2>
          <p>
            在幻灯片上设置
            <code>data-state="something"</code>，当幻灯片打开时，<code
              >"something"</code
            >
            会作为一个类被添加到文档元素上。这使您能够应用更广泛的样式更改，例如切换页面背景。
          </p>
        </section>

        <section data-state="customevent">
          <h2>状态事件</h2>
          <p>
            此外，可以通过绑定<code>data-state</code>名称在每个幻灯片上触发自定义事件。
          </p>
          <pre><code class="javascript" data-trim contenteditable style="font-size: 18px;">
            Reveal.on( 'customevent', function() {
              console.log( '"customevent" 已触发' );
            } );
					</code></pre>
        </section>

        <section>
          <h2>稍等片刻</h2>
          <p>
            按 B 或 .
            键暂停演示。这在您在舞台上时很有用，可以将令人分散注意力的幻灯片从屏幕上移除。
          </p>
        </section>

        <section>
          <h2>更多功能</h2>
          <ul>
            <li>右至左支持</li>
            <li>
              <a href="https://revealjs.com/api/">广泛的JavaScript API</a>
            </li>
            <li>
              <a href="https://revealjs.com/auto-slide/">自动推进</a>
            </li>
            <li>
              <a href="https://revealjs.com/backgrounds/#parallax-background"
                >视差背景</a
              >
            </li>
            <li>
              <a href="https://revealjs.com/keyboard/">自定义键盘绑定</a>
            </li>
          </ul>
        </section>

        <section style="text-align: left">
          <h1>结束</h1>
          <p>
            - <a href="https://slides.com">尝试在线编辑器</a> <br />
            -
            <a href="https://github.com/hakimel/reveal.js">源代码和文档</a>
          </p>
        </section>
      </div>
    </div>

    <script src="dist/reveal.js"></script>
    <script src="plugin/zoom/zoom.js"></script>
    <script src="plugin/notes/notes.js"></script>
    <script src="plugin/search/search.js"></script>
    <script src="plugin/markdown/markdown.js"></script>
    <script src="plugin/highlight/highlight.js"></script>
    <script>
      // Also available as an ES module, see:
      // https://revealjs.com/initialization/
      Reveal.initialize({
        controls: true,
        progress: true,
        center: true,
        hash: true,

        // Learn about plugins: https://revealjs.com/plugins/
        plugins: [
          RevealZoom,
          RevealNotes,
          RevealSearch,
          RevealMarkdown,
          RevealHighlight,
        ],
      })
    </script>
  </body>
</html>
